<template>
  <div v-if="!settingStore.menu_fold" class="title">小余甄选</div>
  <div v-else class="title_img">
    <img src="https://react-project-try-1320075701.cos.ap-guangzhou.myqcloud.com/%E5%A4%B4%E5%83%8F.jpg" alt="" />
  </div>
  <el-menu @select="clickMenu" :default-active="route.path" class="el-menu-vertical-demo" :collapse="settingStore.menu_fold" background-color="#545c64" :active-text-color="settingStore.color" text-color="#fff">
    <template v-for="item in userStore.menuRoute" :key="item.path">
      <!-- 有孩子且父亲的hidden是false -->
      <template v-if="item.children && !item.meta.hidden">
        <el-sub-menu :index="item.path">
          <template #title>
            <el-icon>
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span>{{ item.meta.title }}</span>
          </template>

          <el-menu-item-group>
            <template v-for="i2 in item.children" :key="i2.path">
              <el-menu-item :index="i2.path">{{ i2.meta.title }}</el-menu-item>
            </template>
          </el-menu-item-group>
        </el-sub-menu>
      </template>

      <!-- 有孩子且父亲的hidden是true -->
      <template v-if="item.children && item.meta.hidden">
        <el-menu-item :index="item.children[0].path">
          <el-icon>
            <component :is="item.children[0].meta.icon"></component>
          </el-icon>
          <template #title>{{ item.children[0].meta.title }}</template>
        </el-menu-item>
      </template>

      <!-- 无孩子 -->
      <template v-if="!item.children && !item.meta?.hidden">
        <el-menu-item :index="item.path">
          <el-icon>
            <component :is="item.meta.icon"></component>
          </el-icon>
          <template #title>{{ item.meta?.title }}</template>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { useSettingStore } from '@/store/module/setting'
import { useUserStore } from '@/store/module/user'
import { useRoute, useRouter } from 'vue-router'

const settingStore = useSettingStore()
const userStore = useUserStore()
const router = useRouter()

// 设置菜单持续高亮
const route = useRoute()
// 点击菜单
const clickMenu = (path: string) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.title {
  height: 4vh;
  color: white;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 4vh;
}

.title_img {
  height: 4vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    height: 4vh;
    width: 4vh;
    border-radius: 50%;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 96vh;
}
</style>
